// 错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，
// 而并不会渲染那些发生崩溃的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
// 错误边界无法捕获以下场景中产生的错误：

// 事件处理（了解更多）
// 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
// 服务端渲染
// 它自身抛出来的错误（并非它的子组件）

// 如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，
// 那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印
// 错误信息。

// 注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误。
// 自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。

import React, { PureComponent } from 'react'

class ErrorBoundary extends PureComponent {

    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        console.log(error, errorInfo);
    }

    render() {
        const jsx = this.state.hasError ? "发生了错误" : this.props.children;
        return (
            <div>
               {jsx}
            </div>
        )
    }
}

export default class AB extends PureComponent {
    render() {
        return (
            <ErrorBoundary>
                错误边界内部的组件
            </ErrorBoundary>
        )
    }
}